<template>
  <div class="login-panel">
    <div class="login-container">
      <global-card title="登录">
        <template v-slot:content="{ showCom }">
          <div class="content">
            <component
              :is="component[showCom]"
              @submit="handleLoginClick"
              class="common"
            ></component>
          </div>
        </template>
      </global-card>
    </div>
    <div class="bottom">
      <div class="left">
        <el-checkbox v-model="passCheckout" label="记住密码" size="large" />
      </div>
      <div class="right">
        <span class="forgetPass">忘记密码</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, ref } from 'vue'
import { useStore } from 'vuex'
import globalCard from '@/components/globalCard.vue'
import LoginFormCom from './loginForm.vue'
import phoneFormCom from './phoneForm.vue'
import { localCache } from '@/utils'
import { LoginForm } from './types'
const store = useStore()
const passCheckout = ref(true)

function handleLoginClick(form: LoginForm) {
  if (passCheckout.value) {
    // 本地缓存
    localCache.setCache('userName', form.userName)
    localCache.setCache('passWord', form.passWord)
  } else {
    localCache.deleteCache('userName')
    localCache.deleteCache('passWord')
  }
  if (form.userName) {
    // 用户名登录

    store.dispatch('login/getTokenAction', { ...form })
  } else {
    // 手机号登录
    store.dispatch('login/getPhoneTokenAction', { ...form })
  }

  console.log(form, 'loginForm')
  // ElMessage.success('登录成功！')
}
const component: any = shallowRef({
  LoginFormCom,
  phoneFormCom
})
</script>

<style lang="less" scoped>
.login-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .login-container {
    width: 38%;
    .content {
      height: 206px;
    }
  }
  .bottom {
    width: 38%;
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    .right {
      display: flex;
      align-items: center;
      .forgetPass {
        font-size: 14px;
        color: #409eff;
        cursor: pointer;
      }
    }
  }
}
</style>
